<template>
  <div class="blog-container">
    <div class="blog-header">
      <h2>我的博客</h2>
      <button class="add-btn" @click="createNewBlog">写新博客</button>
    </div>
    
    <!-- 博客列表 -->
    <div class="blog-list">
      <div v-for="blog in blogs" :key="blog.id" class="blog-item">
        <div class="blog-content">
          <h3>{{ blog.title }}</h3>
          <p>{{ blog.content }}</p>
          <div class="blog-meta">
            <span>{{ blog.date }}</span>
            <div class="blog-actions">
              <button @click="editBlog(blog)" class="edit-btn">编辑</button>
              <button @click="deleteBlog(blog.id)" class="delete-btn">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑/新建博客的弹窗 -->
    <div v-if="showEditModal" class="modal">
      <div class="modal-content">
        <h3>{{ editingBlog.id ? '编辑博客' : '新建博客' }}</h3>
        <input 
          v-model="editingBlog.title" 
          placeholder="博客标题"
          type="text"
        >
        <textarea 
          v-model="editingBlog.content" 
          placeholder="博客内容"
          rows="6"
        ></textarea>
        <div class="modal-actions">
          <button @click="saveBlog" class="save-btn">保存</button>
          <button @click="closeModal" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogList',
  data() {
    return {
      blogs: [
        // 模拟的博客数据
        {
          id: 1,
          title: '示例博客1',
          content: '这是一篇示例博客的内容...',
          date: '2024-01-01'
        }
      ],
      showEditModal: false,
      editingBlog: {
        id: null,
        title: '',
        content: ''
      }
    }
  },
  methods: {
    createNewBlog() {
      this.editingBlog = {
        id: null,
        title: '',
        content: ''
      };
      this.showEditModal = true;
    },
    editBlog(blog) {
      this.editingBlog = { ...blog };
      this.showEditModal = true;
    },
    async saveBlog() {
      if (!this.editingBlog.title.trim() || !this.editingBlog.content.trim()) {
        alert('标题和内容不能为空');
        return;
      }

      if (this.editingBlog.id) {
        // 更新现有博客
        const index = this.blogs.findIndex(b => b.id === this.editingBlog.id);
        if (index !== -1) {
          this.blogs[index] = {
            ...this.editingBlog,
            date: new Date().toLocaleDateString()
          };
        }
      } else {
        // 创建新博客
        const newBlog = {
          ...this.editingBlog,
          id: Date.now(), // 使用时间戳作为临时ID
          date: new Date().toLocaleDateString()
        };
        this.blogs.unshift(newBlog);
      }
      
      this.closeModal();
    },
    deleteBlog(id) {
      if (confirm('确定要删除这篇博客吗？')) {
        this.blogs = this.blogs.filter(blog => blog.id !== id);
      }
    },
    closeModal() {
      this.showEditModal = false;
      this.editingBlog = {
        id: null,
        title: '',
        content: ''
      };
    }
  }
}
</script>

<style scoped>
.blog-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.add-btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-item {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.blog-content h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  color: #666;
  font-size: 0.9em;
}

.blog-actions {
  display: flex;
  gap: 10px;
}

.edit-btn, .delete-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-btn {
  background-color: #42b983;
  color: white;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
}

.modal-content input,
.modal-content textarea {
  width: 100%;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.save-btn, .cancel-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.save-btn {
  background-color: #42b983;
  color: white;
}

.cancel-btn {
  background-color: #666;
  color: white;
}

button:hover {
  opacity: 0.9;
}
</style>